<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<!--
    TODO: vue入门案例
    1. 导入vue框架
        1). webapp创建一个js目录,放入vue.js文件
        2). 用script标签导入vue.js
    2. 编写代码
        1). 视图 : html
        2). 脚本 : js

    3. 直接在idea单击浏览器
        用idea内置服务器(类似tomcat)
-->
<!--
    TODO:  入门案例解释
    1. 脚本语法
        new Vue(js对象)
    2. js对象
        1). el属性(element元素) : 选择器
                vue的作用范围
        2). data属性(数据) :  js对象
                存放数据
    3. 插值表达式
        {{data中的属性}}  -> 引用此属性值
        此表达式是vue框架的内容,只能在vue的作用范围内有效
-->
<body>
<!--
    TODO:视图部分
-->
        <div id="myDiv">
            {{m2}}
        </div>

        
</body>
<script src="js/vue.js"></script>
<script>
    /*
* TODO: 脚本部分
* */
    new Vue({
        el :"#myDiv",//id=myDiv
        data:{
            msg:"hello vue",
            m2:"hello world"
        }
    })
    /*
    js对象和json对象
    1. json对象是文本形式的js对象
    2. js对象的语法格式
         {name1 : value1,name2: value2}
    3. json对value类型有限制
        number,string,boolean,null,对象,数组...
* */
    //命名函数
    function y() {

    }
        //匿名函数
    let x = function () {

    }
    let  Jsobj = {
        name : "zs",
        age : 18,
        speak : function () {
            console.log(this.name+"说,今天天气真好");
        }
    }
    Jsobj.speak()

</script>
</html>